<template>
	<view class="content" @touchstart="start" @touchend="end">
		<ren-calendar ref='ren' :collapsible="true" :markDays='markDays'  :disabledAfter="true" :headerBar='true' @onDayClick='onDayClick'  @fnnc="fnnc"></ren-calendar>
		<!-- <view class="change">选中日期：{{curDate}}</view> -->
		<view class="conItems" :class="[flage?'isBg':'heghtCon']">
			<block v-if="is">
				<view class="yangs">
					<yang :isSet="2" ></yang>
				</view>
			</block>
			<block >
				<badness  :list="listGood" :day="curDate" @func="onDate" :listGoods="goodList"></badness>
			</block>
			<view class="kongs"></view>
		</view>
	</view>
</template>

<script>
	let app = getApp().globalData;
	import RenCalendar from '@/components/ren-calendar.vue';
	import yang from '@/components/yangs.vue';
	import badness from '@/components/badnessTo.vue';
	import util from '@/common/js/util.js'
	export default {
		components: {
			RenCalendar,
			yang,
			badness
		},
		data() {
			return {
				curDate: '', //选中日期
				markDays: [{
					date: '2020-09-10',
					isover: false
				}, {
					date: '2020-09-11',
					isover: false
				}, {
					date: '2020-09-12',
					isover: true
				}],
				// 上下滑动
				startData: {
					clientX: 0,
					clientY: 0
				},
				flage: true,
				is:false,
				listGood:[],
				dates:'',//当前时间
				Y:'',//年
				M:'',//月
				goodList:[],
				y: new Date().getFullYear(), // 年
				m: new Date().getMonth() + 1, // 月
				d:new Date().getDate(),
				ty:'',//当前是否需要切换月份
			}
		},
		onReady() {
			let today = this.$refs.ren.getToday().time;
			this.curDate = today;
		},
		methods: {
			onDayClick(data) {
				let that =this;
				this.curDate = data.time;
				this.dates = data.date;
				app.dateTime = this.dates
				console.log('datas',this.dates)
				this.getData(data.date)
			},

			start(e) {
				this.startData.clientX = e.changedTouches[0].clientX;
				this.startData.clientY = e.changedTouches[0].clientY;
				// console.log(e)
			},

			end(e) {
				// console.log(e)
				let flage = this.flage
				const subX = e.changedTouches[0].clientX - this.startData.clientX;
				const subY = e.changedTouches[0].clientY - this.startData.clientY;
				console.log('subX',subX)
				if(subX>50){
					console.log('月份减少')
					app.ty='pre'
					this.$refs.ren.changeMonth()
				}else if(subX<-50){
					console.log('月份增加')
					app.ty='next'
					this.$refs.ren.changeMonth()
				}
				if (subY > 50) {
					if (!flage) {
						this.$refs.ren.toggle()
						this.flage = true
					}
					return
				} else if (subY < -50) {
					if (flage) {
						this.$refs.ren.toggle();
						this.flage = false
					}
					return
				}
			},
			getData(date){
				console.log(date)
				let that =this;
				let listGoods=[]
				this.$http._post('yang/getdayaction.do',{actionday:date}).then(res=>{
					console.log(res)
					if(res.data.issuccess==1){
						let {data} = res.data;
						for(let i=0;i<data.length;i++){
							if(data[i].isover==1){
								listGoods.push(data[i])
							}
						}
						console.log('data',data)
						that.goodList=listGoods;
						that.listGood = data;
						that.getMarkDays();
					}else{
						this.$http.isMssage(res.data.msg)
					}
				})
			},
			onDate(){
				this.getData(this.dates)
			},
			getMarkDays(){
				this.$http._post('yang/getmonthcctiondays.do',{
					year:this.Y,
					month:this.M
				}).then(res=>{
					if(res.data.issuccess==1){
						let {data} = res.data;
						this.markDays = data;
					}else{
						this.$http.isMssage(res.data.msg)
					}
					console.log(res)
				})
			},
			fnnc(data){
				this.Y=data.y;
				this.M=data.m;
				this.getMarkDays();
				console.log('data',data)
				this.listGood=[];
				this.goodList=[];
				let that =this;
				if(this.M ==that.m){
					let date = `${that.y}-${that.m}-${that.d}`;
					that.getData(date)
				}
			}

		},
		onLoad() {
			
		},
		onShow() {
			let that =this;
			if(that.dates){
				that.getData(that.dates);
				// that.getMarkDays();
			}else{
				let data = new Date();
				let date = util.fmdata(data);
				that.dates =date.date;
				that.Y= date.Y;
				that.M = date.M
				that.getData(date)
				// that.getMarkDays();
				app.dateTime = that.dates
			}
		}
	}
</script>

<style lang="scss">
	@import "../../../common/css/flex.css";
	@import "../../../common/css/index.scss";

	page {
		background: #fff;
	}
	// .content{
		
	// }
	.conItems {
		width: 100%;
		background: #F8F8F8;
		border-radius: 57upx 57upx 0px 0px;
		min-height: 650upx;
		transition: All 0.4s ease;
		-webkit-transition: All 0.4s ease;
		position: relative;
		// border: 1px solid red;
		margin-top: 0upx;
		.yangs{
			width: 100%;
			height: 100%;
		
		}
	}

	.heghtCon {
		min-height: 1000upx;

	}
	.kongs{
		height: 20upx;
	}
</style>
